<template>
  <el-dialog class="gl_dialog_TitleLine" width="660px" :title="title" :before-close="dialogClose" :append-to-body="true" :visible="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form ref="form" :rules="rules" :model="peopleForm" label-position="left" label-width="80px">
      <el-form-item prop="paperImage" label="证书">
        <el-input v-model="peopleForm.paperImage" style="display: none" />
        <div class="upload_game_img" @click="openPhotoCropper('paperImage')">
          <img v-if="peopleForm.paperImage" class="show_img" :src="getStaticFileUrl(peopleForm.paperImage)" alt="">
          <div v-else>
            <div style="text-align:center"><i class="el-icon-plus" /></div>
            <p class="gl_mt_30">证书</p>
          </div>
        </div>
      </el-form-item>
      <el-form-item prop="paperDesc" label="证书名称">
        <el-input v-model="peopleForm.paperDesc" style="width:60%" placeholder="请输入证书名称" size="mini" />
      </el-form-item>
      <el-form-item prop="paperNumber" label="证书编号">
        <el-input v-model="peopleForm.paperNumber" style="width:60%" placeholder="请输入证书编号" size="mini" />
      </el-form-item>
    </el-form>
    <photo-cropper-dialog ref="paperImagePhotoCropper" @photoCropperSave="photoCropperSave" />
    <el-row class="gl_mt_15">
      <el-col :span="24" align="right">
        <el-button type="default" size="mini" @click="dialogClose()">取消</el-button>
        <el-button :loading="loading" type="primary" size="mini" @click="submitData()">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import validator from '@/lib/validate/index.js';
import photoCropperDialog from './photoCropperDialog';
import {
  api_POST_EventsManagementRegisterTagRegisterTagDetail, // 添加会员标签详细信息(认证标签)
  api_PUT_EventsManagementRegisterTagRegisterTagDetail // 编辑
} from '@/extend/api/gameswaggerApi/app.js';
import {
  SiSTKWEventsManagementUpdateRegisterTagDetailInput
} from '@/lib/form/game/swaggerForm';
export default {
  name: 'Dialog',
  components: { photoCropperDialog },
  props: {
    peopleData: { // 表单
      type: Object,
      default() {
        return {
          paperImage: '',
          paperNumber: '',
          paperDesc: ''
        };
      }
    },
    title: { // 弹窗标题
      type: String,
      default: ''
    },
    tagId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dialogVisible: false,
      loading: false,
      peopleForm: {
        paperImage: '',
        paperNumber: '',
        paperDesc: ''
      },
      SiSTKWEventsManagementUpdateRegisterTagDetailInput: new SiSTKWEventsManagementUpdateRegisterTagDetailInput(),
      rules: {
        paperNumber: [
          validator.required('证书编号不能为空')
        ],
        paperDesc: [
          validator.required('证书描述不能为空')
        ],
        paperImage: [
          validator.required('证书描述不能为空')
        ]
      }
    };
  },
  methods: {
    // 图片回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    photoCropperSave(fileUrl) {
      this.$set(this.peopleForm, 'paperImage', fileUrl.tempUrl);
    },
    openPhotoCropper(code) {
      this.$refs[code + 'PhotoCropper'].open(this.peopleForm[code]);
    },
    // 提交认证信息
    submitData() {
      var that = this;
      that.$refs.form.validate((valid) => {
        if (valid) {
          that.loading = true;
          if (that.peopleForm.id) {
            that.SiSTKWEventsManagementUpdateRegisterTagDetailInput.registerTagDetailId = that.peopleForm.id;
            that.SiSTKWEventsManagementUpdateRegisterTagDetailInput.registerTagId = that.tagId;
            that.SiSTKWEventsManagementUpdateRegisterTagDetailInput.paperImage = that.peopleForm.paperImage;
            that.SiSTKWEventsManagementUpdateRegisterTagDetailInput.paperNumber = that.peopleForm.paperNumber;
            that.SiSTKWEventsManagementUpdateRegisterTagDetailInput.paperDesc = that.peopleForm.paperDesc;
            api_PUT_EventsManagementRegisterTagRegisterTagDetail(that.SiSTKWEventsManagementUpdateRegisterTagDetailInput).then(res => {
              that.loading = false;
              that.$message({
                message: '编辑成功',
                type: 'success'
              });
              that.dialogVisible = false;
              that.$parent.getRegisterList();
            }).catch(() => {
              that.loading = false;
            });
          } else {
            that.peopleForm.registerTagId = that.tagId;
            api_POST_EventsManagementRegisterTagRegisterTagDetail(that.peopleForm).then(res => {
              that.loading = false;
              that.$message({
                message: '认证成功',
                type: 'success'
              });
              that.dialogVisible = false;
              that.$parent.getRegisterList();
            }).catch(error => {
              that.loading = false;
              that.dialogVisible = false;
              that.$message({
                message: error.error.message,
                type: 'warning'
              });
            });
          }
        }
      });
    },
    // 打开弹窗
    open() {
      this.peopleForm = JSON.parse(JSON.stringify(this.peopleData));
      this.dialogVisible = true;
    },
    // 关闭弹窗
    dialogClose() {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    }
  }
};
</script>
<style scoped>
.common_title{
  height:50px;
  line-height: 50px;
  border-bottom:1px solid #000;
}
.common_content{
  padding:0px 20px;
}
.upload_game_img {
  margin-top:12px;
  width: 250px;
  height: 160px;
  display: flex;
  flex-flow: column;
  line-height: 3px;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  background: rgba(0,0,0,0.02);
  border: 1px dashed rgba(0,0, 0, 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;
}
.upload_game_img:hover {
  border-color: #409eff;
}
.upload_game_img .show_img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}
</style>
